<template>
  <div>
    <dc-cell title="实时桌态" class="bg-white mt20"></dc-cell>
    <dc-row class="pt40 pb40 bg-white" type="flex" justify="space-around">
      <dc-col class="card-data" span="6">
        <span class="num">{{tabData.tablefulTotalNum}}/{{tabData.noTablefulTotalNum}}</span>
        <span class="label">占用/空闲</span>
      </dc-col>
      <dc-col class="card-data" span="6">
        <span class="num">{{tabData.closeAccountNum}}/{{tabData.noCloseAccountNum}}</span>
        <span class="label">已结单/未结单</span>
      </dc-col>
      <dc-col class="card-data" span="6">
        <span class="num">{{tabData.eatingNum}}</span>
        <span class="label">就餐人数</span>
      </dc-col>
    </dc-row>
    <dc-row class="pt40 pb40 bg-white startDetail" type="flex" justify="space-around" align="middle"
            v-for="item in tabData.tablefulAccount" :key="item.tablefulNum">
      <dc-col span="4 text-left">
        <span class="num">{{item.domainName}}</span>
      </dc-col>
      <dc-col span="18 text-left pr">
        <div class="bar-out">
          <div class="bar-in" :style="{width:item.tablefulNum+'px'}"></div>
        </div>
        <span class="num pa-num">满桌/空桌：{{item.tablefulNum}}/{{item.noTablefulNum}}</span>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  import {col, row} from '@/common/Flex';
  import cell from '@/common/plugins/cell';
  import api from '../../../common/api/storeCondition';
  export default {
    data () {
      return {
        tabData: {
          tablefulTotalNum: 0,
          noTablefulTotalNum: 0,
          closeAccountNum: 0,
          noCloseAccountNum: 0,
          eatingNum: 0
        }
      };
    },
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell
    },
    props: {
      timeFlag: [String, Number],
      beginTime: Number,
      endTime: Number
    },
    watch: {
      beginTime () {
        this.buildChart();
      }
    },
    mounted () {
      this.buildChart();
    },
    activated () {
      this.buildChart();
    },
    methods: {
      buildChart () {
        this._getday();
      },
      _getday () {
        api.getTabTime({}).then(res => {
          this.tabData = res;
        });
      }
    }

  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .bar-out {
    width: 100%;
    height: px2rem(50px);
    background: #edeef2;
    .bar-in {
      height: px2rem(50px);
      background: #7b78f2;;
    }
  }

  .startDetail {
    padding-top: px2rem(20px);
  }

  .aln-center {
    display: flex;
    align-items: center;
  }

  .num {
    font-size: px2rem(32px);
    color: #333;
  }

  .pa-num {
    position: absolute;
    top: px2rem(4px);
    left: px2rem(100px);
  }
</style>
